<style media="screen">
  #myFlowIndex .page-title{
    font-size: 16px;
    font-weight: 500;
    color:#666;
    line-height: 56px;
    margin: 0 24px;
    border-bottom: 1px solid #E3E3E5;
  }
  .head-container{
    padding: 10px 0 14px;
    margin: 0 24px;
    border-bottom: 1px solid #E3E3E5;
  }
  .head-container .mes{
    overflow: hidden;
    margin-right: 10px;
    float: left;
  }
  .head-container .mes p{
    font-size: 12px;
    color:#CFCFCF;
    margin-bottom: 6px;
  }
  .head-container .mes input{
    width: 220px;
    height: 34px;
  }
  .head-container .flow{
    float: left;
    margin-right: 10px;
  }
  .head-container .flow p{
    font-size: 12px;
    color:#CFCFCF;
    margin-bottom: 6px;
  }
  .head-container .flow .flow-select{
    width: 140px;
    height: 34px;
  }
  .head-container .button-group{
    padding-top: 23px;
  }
  .cr-subnav{
    margin:12px 24px;
  }

</style>

<section id="myFlowIndex">
  <p class="page-title">流程汇总列表</p>
  <div class="head-container relative clearfix">
    <div class="mes">
      <p>信息检索</p>
      <div class="global_search">
        <span class="icon-Gm-search"></span>
        <input
          type="text"
          class="global_ipt_text"
          placeholder="发起人/关联单据/客户名称"
          v-model="info"
         />
      </div>

    </div>
		<div class="flow" v-if="showView">
		  <p class="color-cfcfcf">项目</p>
		  <hl-select :data="projectList" v-model="projectId" width="140" @on-change="getprojectId"></hl-select>
		</div>
		<div class="flow" v-if="showView">
		  <p class="color-cfcfcf">楼宇</p>
		  <hl-select :data="buildingList" v-model="buildingId" width="140" @on-change="getbuildingId"></hl-select>
		</div>
		<div class="flow" v-if="showView">
		  <p class="color-cfcfcf">楼层</p>
		  <hl-select :data="floorList" v-model="floorId" width="140" @on-change="getfloorId"></hl-select>
		</div>
		<div class="flow" v-if="showView" style="margin-right: 24px;">
		  <p class="color-cfcfcf">单元</p>
		  <hl-select :data="unitList" v-model="unitId" width="140" @on-change="getunitId"></hl-select>
    </div>
		<div class="flow" :class="{'mt-10': showView}">
		  <p>流程名称</p>
		  <hl-select :data="todoState" v-model="selectedData" width="140" @on-change="checkBpm"></hl-select>
		</div>
    <div class="button-group pull-left" :class="{'mt-10': showView}">
      <hl-button size="mini" @on-click="getDateTime">查询</hl-button>
      <hl-button size="mini" @on-click="reset">重置</hl-button>
    </div>

		<div class="global_open_sign" @click="openSearch">
		  <span v-if="!showView">更多筛选项</span>
		  <span v-if="showView">收起筛选项</span>
		</div>

  </div>

  <div class="cr-subnav">
    <ul class="clearfix">
      <li
        :class="{'pull-left':1, 'pl-24':1, 'pr-24':1, 'line-height-34':1, active: item.code === flag}"
        @click="flowClickNav(item.code)"
        v-for="(item, index) in subLiData">
        {{item.name}}
      </li>
    </ul>
  </div>
  <div class="todo-content global_table" style="border:1px solid #E5E5E5;">		
    <div class="todo-content-head global_table_title">
      <div class="dy-fx-1">序号</div>
      <div class="dy-fx-3">流程编号</div>
      <div class="dy-fx-2">流程名称</div>
      <div class="dy-fx-3">关联单据</div>
      <div class="dy-fx-3">客户名称</div>
      <div class="dy-fx-2">发起人</div>
      <div class="dy-fx-3">发起时间</div>
      <div class="dy-fx-1">状态</div>
      <div class="dy-fx-2 border-l">操作</div>
    </div>
    <div class="relative">
			<div class="absolute dy-flex" style="justify-content: center;align-items: center;left: 0px; top: 0;width: 100%;height: 100%;background-color: rgba(255,255,255,.8);" v-if="loadingGif">
				<img src="assets/images/loading.gif" alt="">
			</div>
			<div class="todo-content-list global_table_item" v-for="(item, index) in data">
			  <div class="dy-fx-1">{{index+1 | tozero}}</div>
			  <div class="dy-fx-3 ellipsis-1" :title="item.bpmNO">{{item.bpmNO}}
			  </div>
			  <div class="dy-fx-2 ellipsis-1" :title="item.bpmName">{{item.bpmName}}</div>
			  <div class="dy-fx-3 ellipsis-1">{{item.businessNO || '--'}}</div>
			  <div class="dy-fx-3 ellipsis-1">{{item.customerName || '--'}}</div>
			  <div class="dy-fx-2 ellipsis-1">{{item.starterName}}</div>
			  <div class="dy-fx-3 ellipsis-1">{{item.bpmTime | timeFilter}}</div>
			  <div class="dy-fx-1 ellipsis-1">{{item.state | flowState}}</div>
			  <div class="dy-fx-2 border-l">
			    <a v-if="item.bpmKey == 'IT'" @click="goToITFLow(item.businessId,item.bpmId,item.taskId,item.bpmKey)" href="javascript:;">查看</a>
			    <a v-if="item.bpmKey == 'BT'" @click="tobill(item.businessId,item.bpmId,item.taskId,item.bpmKey)" href="javascript:;">查看</a>
			    <a v-if="item.bpmKey == 'CT'" @click="goToContractFLow(item.businessId,item.bpmId,item.taskId,item.bpmKey)" href="javascript:;">查看</a>
			    <a v-if="item.bpmKey == 'WT'" @click="goToWithdrawFlow(item.businessId,item.bpmId,item.taskId,item.bpmKey)" href="javascript:;">查看</a>
			    <a v-if="item.bpmKey == 'RRAT'" @click="gotoRRATpage(item.businessId,item.bpmId,item.taskId,item.bpmKey,item.state)" href="javascript:;">查看</a>
			    <a v-if="item.bpmKey == 'CCT'" @click="cctFlowPage(item.businessId,item.bpmId,item.taskId,item.bpmKey,item.state)" href="javascript:;">查看</a>
			    <a v-if="item.bpmKey == 'IT' && item.starterId == userid && item.state == 'ON'" href="javascript:;" @click="withdrawCH(item.bpmId)">撤回</a>
			    <a v-if="item.bpmKey == 'IT' && item.starterId == userid && item.state == 'ON'" href="javascript:;" @click="cuiban(item.bpmId,item.taskId)">催办</a>
			    <a v-if="item.bpmKey == 'CT' && item.starterId == userid && item.state == 'ON'" href="javascript:;" @click="withdrawCH(item.bpmId)">撤回</a>
			    <a v-if="item.bpmKey == 'CT' && item.starterId == userid && item.state == 'ON'" href="javascript:;" @click="cuiban(item.bpmId,item.taskId)">催办</a>
			    <a v-if="item.bpmKey == 'WT' && item.starterId == userid && item.state == 'ON'" href="javascript:;" @click="withdrawCH(item.bpmId)">撤回</a>
			    <a v-if="item.bpmKey == 'WT' && item.starterId == userid && item.state == 'ON'" href="javascript:;" @click="cuiban(item.bpmId,item.taskId)">催办</a>
					<a v-if="item.bpmKey == 'RRAT' && item.starterId == userid && item.state == 'ON'" href="javascript:;" @click="withdrawCH(item.bpmId)">撤回</a>
					<a v-if="item.bpmKey == 'RRAT' && item.starterId == userid && item.state == 'ON'" href="javascript:;" @click="cuiban(item.bpmId,item.taskId)">催办</a>
					<a v-if="item.bpmKey == 'CCT' && item.starterId == userid && item.state == 'ON'" href="javascript:;" @click="withdrawCH(item.bpmId)">撤回</a>
					<a v-if="item.bpmKey == 'CCT' && item.starterId == userid && item.state == 'ON'" href="javascript:;" @click="cuiban(item.bpmId,item.taskId)">催办</a>
					<a v-if="item.bpmKey == 'BT' && item.starterId == userid && item.state == 'ON'" href="javascript:;" @click="withdrawCH(item.bpmId)">撤回</a>
					<a v-if="item.bpmKey == 'BT' && item.starterId == userid && item.state == 'ON'" href="javascript:;" @click="cuiban(item.bpmId,item.taskId)">催办</a>
			  </div>
			</div>
		</div>
  </div>

  <div class="user-page pl-24 pr-24 ptb-10 clearfix">
    <div class="pull-left user-page-num">
      <span class="font-14">共<i>{{pageNum.totalCount}}</i>条记录</span>
      <span>每页
				<div class="inline">
					<hl-select :data="pageNums" v-model="limit" width="80" @on-change="getDateTime"></hl-select>
				</div>
    条
    </span>
    </div>
    <div class="pull-right">
			<hl-pagination v-model="currentPage"  :total="pageNum.totalPage"  @change="handleChange"></hl-pagination>
      <!-- <ul class="page" id="page"></ul> -->
    </div>
  </div>
</section>
<script src="modules/workbench/scripts/myflowlist.js" charset="utf-8"></script>
